<template>
  <div class="chat-header" flex="main:justify cross:center">
    <div class="left">
      <slot name="left"></slot>
    </div>
    <div class="center">
      <slot name="center"></slot>
    </div>
    <div class="right">
      <slot name="right"></slot>
    </div>
  </div>
</template>

<script setup>

</script>

<style lang="stylus" scoped>
.chat-header {
  width: 100%;
  height: 46px;
  padding: 0 0.75rem;
  background: rgba(255, 255, 255, 0.8);
  border-bottom: 1px solid rgb(232, 235, 240);

  .center{
    width: 60%;
    text-align: center;
  }

  .left {
    width: 20%;
    text-align: left;
  }

  .right {
    width: 20%;
    text-align: right;
  }
}

</style>
